<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框全选功能</title>
    <style>
        table{
            width: 300px;
            border-collapse: collapse;
        }
        td,th{
            border: 1px solid #cccccc;
            padding: 3px 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td><input type="checkbox" id="all">全选</td>
            <td>名称</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>手机</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>相机</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>电脑</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="ck"></td>
            <td>平板</td>
        </tr>
    </table>
    <script>
        let all = document.querySelector("#all")
        let cks = document.querySelectorAll(".ck")
        all.onclick = function(){
            if(this.checked){
                for(let i=0;i<cks.length;i++){
                    cks[i].checked = true
                }
            }else{
                for(let i=0;i<cks.length;i++){
                    cks[i].checked = false
                }
            }
        }
        for(let i=0;i<cks.length;i++){
            cks[i].onclick = function(){
                checkAll();
            }
        }
        //全选方法
        function checkAll(){
            for(let i=0;i<cks.length;i++){
                if(cks[i].checked===false){
                    all.checked = false
                    return
                }
            }
            all.checked = true;
        }

    </script>
</body>
</html>